<template>
    <div>
     <header>
         <i @click="back" class="iconfont">&#xe663;</i>
         <p>个人资料</p>
         
     </header>
     <ul>
         <li>
             <p>头像</p>
             <div>
                 <!-- <form ref="uploadForm"> -->
                <label  for="headImg">
                      <img :src="url?url:($image+users.user_img)"  alt="">
                 </label>
                 <input type="file" name="file" @change="tou($event)" id="headImg" v-show="false" accept="image/*">
                 <!-- </form> -->
                
                 
                  <i class="iconfont">&#xe601;</i>
             </div>
            
         </li>
         
         <li>
             <p>账号</p>
             <div>
                  <p style="color:gray">{{users.username}}</p>
                  <i class="iconfont">&#xe601;</i>
             </div>
             
         </li>
          <li @click="tanPhone">
             <p>手机号</p>
             <div>
                   <p style="color:gray">{{users.phone}}</p>
             <i class="iconfont">&#xe601;</i>
             </div>
           
         </li>
         <li>
             <p>昵称</p>
             <i class="iconfont">&#xe601;</i>
         </li>
         <li>
             <p>个人简介</p>
             <div>
                 <p>{{users.time}}</p>
                  <i class="iconfont">&#xe601;</i>
             </div>
            
         </li>
         <li @click="address">
             <p>收货地址</p>
             <div>
                 <p class="dizhi">{{users.address}}</p>
                 <i class="iconfont">&#xe601;</i>
             </div>
             
         </li>
     </ul>
     <footer>
         <button @click="tuichu">退出登录</button>
     </footer>
     <van-overlay :show="show" @click="show = false">
        <div class="wrapper"  @click.stop>
            <div class="block">
                  <p class="cha">
                         <i @click="cha($event)" style="font-size:18px" class="iconfont">&#xe621;</i>
                    </p>
                <!-- <p>手机号</p> -->
                <div>
                    <input type="text" v-model="value" placeholder="请输入手机号">
                <button @click="submit">提交</button>
                </div>
                
            </div>
        </div>
        </van-overlay>
    </div>
</template>

<script>
import {ajax_phone,ajax_login,ajax_headImg} from '../ajax/index'
import {mapState} from 'vuex'
export default {
    name: '',
    data(){
        return{
             indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
             show:false,
             value:'',
             url:'',
             file:{}
        }
    },
    inject:['reload'],
    methods:{
        back(){
            // this.$router.go(-1);
            this.$router.push('/geRen')
        },
        tuichu(){
            this.$router.push('/');
            this.$store.commit('setLogin',0)
            this.$store.commit('setUser',{})
            this.$store.commit('setCar',[])
        },
        address(){
          this.$router.push('/addressList');
        },
        tanPhone(){
            this.show=true;
        },
        cha(e){
          if(e.target.tagName=='I'){
                this.show=false;
          }
      },
        submit(){
            console.log(this.value);
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(this.value)) {
                alert('手机号输入错误')
            } else {
                ajax_phone({
                    Id:this.users.Id,
                    phone:this.value
                }).then(data=>{
                    // console.log(data);
                     this.reload()
                    alert(data.msg);
                    this.show=false;
                   
                    // this.$router.push('/ziLiao')
                })
                
            }
        },
        tou(e){
            // console.log(e.target.files[0])
            this.file=e.target.files[0]
            console.log(this.file)
            this.url=URL.createObjectURL(this.file);
            console.log(this.url)
            // console.log(this.$refs.uploadForm)
           var formData = new FormData();
           formData.append("file", this.file);
           formData.append("username",this.users.username);
           formData.append("Id",this.users.Id)
           formData.append("user_img",this.file.name);
            // console.log(formData)
            ajax_headImg(formData).then(data=>{
                console.log(data);
               
                    alert(data.msg)
               
            })

        }
    },
    computed:{
        ...mapState(['users'])
    },
    updated(){
        
    },
    mounted(){
       
    },
    destroyed(){
        ajax_login({
            username:this.users.username,
            password:this.users.password,
          
        }).then(data=>{
            // console.log(data);
            if(data.code==1){
                // console.log(data.data[0])
                
                this.$store.commit('setUser',data.data[0]);
            }

        })
    }
}
</script>

<style scoped>
header{
    position: relative;
    width: 100vw;
    padding: 2vh 0;
    text-align: center;
    background-image: linear-gradient(to right top,rgba(193, 218, 82, 0.884),rgb(174, 0, 255),blue);
}
header>i{
  position: absolute;
  left: 5vw;
}

ul{
    width: 94vw;
    padding:0 3vw;
    margin: 4vh auto;
    background-color: white;

}
ul li{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5vh 0;
    position: relative;
    border-bottom: 1px solid rgb(224, 226, 221);
}
li>div{
    display: flex;
    align-items: center;
}
li img{
    width: 15vw;
    height:15vw;
    border-radius: 50%;
}
/* li i{
    position: absolute;
    right: 2vw;
} */
footer{
    width: 90vw;
    padding: 2.4vh 5vw;
}
footer button{
    width: 90vw;
    color: white;
    border: none;
    outline: none;
    padding: 1.8vh 0;
    /* background-color: red; */
    background-image: linear-gradient(to right top,rgb(221, 38, 151),#0f1de7,rgb(255, 208, 0));
}
footer button:hover{
     background-color: red;
        cursor: pointer;
}
.dizhi{
    width: 60vw;
    
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 80%;
    height: 120px;
    background-color: #fff;
    text-align: center;
    /* line-height: 120px; */
    border-radius: 5px;
  
    position: relative;
  }
  .block>.cha{
      position: absolute;
      padding: 1vw;
      top: 1vw;
  }
  .block>div{
    
     
      margin-top: 7vh;
  }
  .block input{
      outline: 0;
      border: 0;
      width: 60%;
      padding: 1vw 2vw;
      border: 1px solid rgb(231, 206, 206);
      
      border-radius: 15px;
      color: brown;
      border-right: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
  .block button{
     outline: 0;
     border: 0;
     width: 15%;
     padding: 1.6vw 2vw;
     color: black;
     border-radius: 15px;
     /* background-image:radial-gradient(at top right,rgb(252, 235, 9),rgb(53, 211, 33),rgb(192, 28, 224)); */
      background-color: greenyellow;
      border-left: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
 
  ::-moz-placeholder{
      color:rgb(255, 0, 242);
  }
</style>